﻿<br /><div class="container  col-md-12">
    <div class="row clearfix">
        <!-- Item Name and Image -->
        <br /><div class="panel panel-default">
            <div class="panel-body">
                <div class="col-md-5 column">
                    <br />
                    <div class="panel panel-default">
                        <wallop-slider data-images="images"
                                       data-animation="rotate"
                                       data-current-item-index="index"
                                       data-on-previous="updateTsPrevious()"
                                       data-on-next="updateTsNext()">
                        </wallop-slider>
                    </div>
                </div>
                <div class="col-md-7 column">
                    <div style="font-weight:700; font-size:30px; padding-bottom: 0px;">
                        <p>{{biditems.Name}}</p>
                    </div>
                    <div style="font-weight:600; font-size:20px; padding-bottom: 0px;">
                        <p>{{biditems.Category}}</p>
                    </div>
                    <div style="font-weight:500; font-size:20px; padding-bottom: 0px;">
                        <p>{{biditems.Description}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                <div class="col-md-1"></div>
                <!-- Item current price, time remaining and bidder -->
                <div class="col-md-5 column">
                    <br /><div class="panel panel-default">
                        <div class="panel-heading" style="text-align:center; font-weight:600; font-size:medium; padding-bottom: 0px;"><p>Make A Bid!</p></div>
                        <div class="panel-body" id="countdown-timer" style="text-align:center">
                            <div style="font-weight:700; font-size:30px;" class="popouthover">
                                {{biditems.Cost | currency}}
                            </div>
                            <div style="font-weight:600; font-size:20px;" ng-show="biditems.msRemaining - tickcount > 0">
                                {{biditems.msRemaining - tickcount | msToTs}}
                            </div>
                            <div style="font-weight:600; font-size:20px;" ng-show="biditems.msRemaining - tickcount < 0 && biditems.IsActive">
                                Uh-Ohes...
                            </div>
                            <div style="font-weight:600; font-size:20px;" ng-hide="biditems.IsActive">
                                Expired
                            </div>
                            <span style="font-weight:600; font-size:20px;" ng-show="!biditems.IsActive && biditems.UserName">Winner: </span><span>{{biditems.UserName}}</span>
                            <span style="font-weight:600; font-size:20px;" ng-show="!biditems.IsActive && !biditems.UserName">No Bids Submitted</span>
                            
                            <button style="text-align:center" class="btn btn-success btn-block popouthoverbtn" ng-click="bidSubmit(biditems)" data-ng-disabled="!username || !biditems.IsActive"><span ng-hide="biditems.IsActive">Sold</span><span ng-show="biditems.IsActive">Bid</span></button>
                        </div>
                    </div>
                </div>
                <!--Bidding history on item item ID as the auction ID-->
                <div class="col-md-5 column">
                    <br /><div class="panel panel-default">
                        <div class="panel-heading" style="text-align:center; font-weight:600; font-size:medium; padding-bottom: 0px;"><p>Bidding History</p></div>
                              <div class="panel-body" style="overflow: auto; max-height:300px;">
                                  <div class="table-bordered table-hover">
                                      <ol>
                                          <li style="border-bottom:1px dashed black" data-ng-repeat="n in bidHistoryUserList track by $index">{{n}}</li>
                                      </ol>
                                  </div>
                              </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>